<template>
  <div class="custom-sql">
    <div class="custom-sql-sql">
      <div class="custom-sql-header">
        <a-button-group>
          <a-button icon="layout" size="default">美化</a-button>
          <a-button icon="thunderbolt" size="default" :loading="loading" @click="excute">执行</a-button>
        </a-button-group>
      </div>
      <div class="custom-sql-full">
        <a-form>
          <a-form-item>
            <a-textarea v-model="sql"></a-textarea>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="custom-sql-result">
      <div class="custom-sql-header">
        <a-button-group>
          <a-button icon="download" size="default">保存</a-button>
        </a-button-group>
      </div>
      <div class="custom-sql-full">
        <a-form>
          <a-form-item class="custom-sql-form">
            <a-textarea v-model="result"></a-textarea>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>


<script>
import { runCustomSql } from '../api/requet.js'
export default {
  data() {
    return {
      sql: "",
      result: "",
      loading: false
    };
  },
  methods: {
    // 执行用户自定义sql
    async excute() {
      var data = await runCustomSql(this.sql);
      this.result = JSON.stringify(data);
      this.loading = false;
    }
  }
};
</script>

<style>
.custom-sql {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 99%;
  width: 100%;
}
.custom-sql-sql {
  flex: 1 1 auto;
  padding: 10px;
}
.custom-sql-header {
  margin-bottom: 10px;
}
.custom-sql-result {
  flex: 1 1 auto;
  padding: 10px;
}
.custom-sql-full {
  height: 100%;
  width: 100%;
}
.custom-sql-full .ant-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.custom-sql-full .ant-form-item {
  height: 100%;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.custom-sql-full .ant-form .alita-button-group {
  height: auto;
  flex: 0 0 auto;
}
.custom-sql-full .ant-form-item textarea.ant-input {
  resize: none;
  height: 100%;
}
.custom-sql-full .ant-form-item-label {
  flex: 0 0 auto;
  text-align: left;
}
.custom-sql-full .ant-form-item-control-wrapper,
.custom-sql-full .ant-form-item-control {
  height: 100%;
}
</style>
